<template>
  <div>
    <van-nav-bar
      title="我的信息"
      left-text="返回"
      right-text="保存"
      left-arrow
      @click-left="$router.go(-1)"
      @click-right="save"
    />
    <van-uploader v-model="fileList" multiple :max-count="1"  :after-read="afterRead" />

    <van-field v-model="form.userNickname" label="昵称：" />
    <van-field v-model="form.userGender" label="性别：" />
    <van-field v-model="form.userMajor" label="专业："  />
    <van-field v-model="form.userLocation" label="地区：" readonly />
  </div>
</template>

<script>
import { PushXinxi,changeTouxiang} from '@/api/user';
import {getMyDate} from '@/api/user'
import { mapState, mapActions } from 'vuex';

export default {
  name: 'xinxi',
  data() {
    return {
      form: {
        userId:'',
        userNickname: '',
        userGender: '',
        userMajor: '',
        userLocation: '',
      },
      touImg:'',
      fileList: [], // 保存上传的文件
    };
  },
  computed: {
    ...mapState('user', ['userInfo'])
  },
  created() {
    // 从 Vuex 中获取数据并设置为初始值
    this.form.userId = this.userInfo.userId;
    this.form.userNickname = this.userInfo.userNickname;
    this.form.userGender = this.userInfo.userGender;
    this.form.userMajor = this.userInfo.userMajor;
    this.form.userLocation = this.userInfo.userLocation;
    this.getMyDate()
  },
  methods: {
    ...mapActions('user', ['updateUserInfo']),
    // 上传文件后的回调函数
    afterRead(file) {
      console.log(file.file);
      changeTouxiang(this.userInfo.userId,file.file).then((res)=>{
        console.log(res);
      })
    },
 //获取个人信息
 getMyDate(){
        getMyDate(this.userInfo.userId)
        .then(res=>{
         this.touImg=res.data.userAvatar
         this.fileList.push({ url:  this.touImg,isImage: true  })
         console.log(this.touImg);
        })
    },
    // 保存用户信息
    save() {
      // 验证数据
      if (
        this.form.userNickname === '' ||
        this.form.userGender === '' ||
        this.form.userMajor === ''
      ) {
        this.$toast('信息不能为空');
        return;
      }else if(this.form.userGender !== '男' && this.form.userGender !== '女' )
       {
        this.$toast('性别必须为男或女');
        return;
      }
      // 更新用户信息
      const updatedUserInfo = {
        ...this.userInfo,
        userNickname: this.form.userNickname,
        userGender: this.form.userGender,
        userMajor: this.form.userMajor,
      };
      this.updateUserInfo(updatedUserInfo);

      // 调用接口更新用户信息
      this.updateUser();
        // this.getMyDate();
    },


    // 调用接口更新用户信息
    updateUser() {
      const { userId, userNickname, userGender, userMajor } = this.form;
      const token = this.userInfo.token
      PushXinxi(userId, userNickname, userGender, userMajor,token)
        .then(res => {
          // 处理更新成功的逻辑
          console.log('用户信息更新成功', res);
          this.$toast('保存成功');
        })
        .catch(error => {
          // 处理更新失败的逻辑
          console.error('用户信息更新失败', error);
          this.$toast('保存失败');
        });
    }
  }
};
</script>
<style lang="less" scoped>
.van-nav-bar__text{
  color: black;
}
 .HeadEdit{
  width: 100%;
 }
 .van-button--primary{
  width: 28.66667vw;
  background-color: #0a87f5;
  font-size: 1.66667vw;
  height: 30px;
  border-radius: 20px;
  margin-top: 10px;
  border: 0;
 }
.van-field__control{
  margin-top: -3px;
}
.van-uploader__input-wrapper {
    position: relative;
    margin-left: -14px;
}
.van-uploader__preview-delete{
  display: none;
}
.van-uploader__wrapper{
  flex-direction: column;
}
.van-uploader{
  width: 100px;
    height: 100px;
    margin-left: 138px;
    margin-top: 40px;
    border-radius: 100px;
}
</style>